import { IdataObj, Iselected } from '../types/datatype'

export function diffColor(str: string) {
   if (str === '简单') {
      return 'rgb(0, 177, 155)'
   } else if (str === '中等') {
      return 'rgb(255, 184, 0)'
   } else if (str === '困难') {
      return 'rgb(255, 45, 85)'
   } else {
      return ''
   }
}

export function percent(n: number) {
   return (n * 100).toFixed(2) + '%'
}

export function convert(s: string) {
   switch (s) {
      case 'EASY':
         return '简单'
      case 'MEDIUM':
         return '中等'
      case 'HARD':
         return '困难'
      default:
         return 'error'
   }
}

export function renderDom(data: Array<IdataObj>) {
   let contentinner = ''
   data.forEach((item, index) => {
      contentinner += `<div class="question-item ${
         index % 2 === 0 ? '' : 'evenbac'
      }">
         <div class="question question-title">${item.frontendQuestionId}. ${
         item.titleCn
      }</div>
         <div class="question sovling">
            ${item.solutionNum}
            <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 24 24"
               width="1em"
               height="1em"
               fill="currentColor"
               class="video"
            >
               <path
                  fill-rule="evenodd"
                  d="M14 5H5a3 3 0 00-3 3v8a3 3 0 003 3h9a3 3 0 003-3v-1.255l3.331 2.998c.644.58 1.669.123 1.669-.743V8c0-.866-1.025-1.322-1.669-.743L17 10.255V8a3 3 0 00-3-3zM5 7h9a1 1 0 011 1v8a1 1 0 01-1 1H5a1 1 0 01-1-1V8a1 1 0 011-1zm12.494 5.5L20 10.244v4.511L17.494 12.5z"
                  clip-rule="evenodd"
               ></path>
            </svg>
         </div>
         <div class="question">${percent(item.acRate)}</div>
         <div class="question" id=${item.difficulty}>${convert(
         item.difficulty,
      )}</div>
      </div>`
   })
   return contentinner
}

export function filterHandle(checked: Iselected) {
   let filters = {}
   if (checked.difficulty === '' && checked.question !== '') {
      filters = { listId: checked.question }
   } else if (checked.question === '' && checked.difficulty !== '') {
      filters = { difficulty: checked.difficulty }
   } else if (checked.difficulty === '' && checked.question === '') {
      filters = {}
   } else {
      filters = { listId: checked.question, difficulty: checked.difficulty }
   }
   return filters
}

export const baseURL = 'https://leetcode.cn/graphql/'
